<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13插件</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
    <div id="demo">
        <p v-my-directive="xxyy"></p>
    </div>
<script>
    //自定义插件
    (function(){
        MyPlugin = {
            install: function (Vue, options) {
                // 1. 添加全局方法或属性
                Vue.myGlobalMethod = function () {
                    alert("myGlobalMethod");
                };

                // 2. 添加全局资源(自定义指令)
                Vue.directive('my-directive', {
                    bind (el, binding, vnode, oldVnode) {
                        el.textContent = binding.value.toUpperCase();
                    }
                });

                // 3. 注入组件选项
                Vue.mixin({
                    created: function () {

                    }
                });

                // 4. 添加实例方法
                Vue.prototype.$myMethod = function (methodOptions) {
                    alert("$myMethod");
                };
            }
        };
        window.MyPlugin = MyPlugin;
    })();
    //声明使用插件
    Vue.use(MyPlugin);
    let app = new Vue({
        el: '#demo',
        data: {
            xxyy:'i am Chinese'
        }
    });
    app.$myMethod(); //实例方法
    Vue.myGlobalMethod(); //全局方法
</script>
</body>
</html>